<template>
  <template v-for='post in articlesList'>
    <article class='entry-preview fade-before fade-after'>
      <div class='thumbnail_box'>
        <a :href='ArticlePath.Path+post.id' class='thumbnail'>
          <img :src='post.articleCover' :alt='post.articleTitle'>
        </a>
      </div>
      <div class='entry-custom-post'>
        <header class='entry-header'>
          <time class='post-time'>{{ timeAgo(new Date(post.createTime)) }}</time>
          <h6 class='entry-title'>
            <a :href='ArticlePath.Path+post.id' rel='bookmark'>{{ post.articleTitle }}</a>
          </h6>
        </header>
        <footer class='post-meta'>
          <div class='post-mark'>
            <span class='tag'>
              <a href='' rel='category tag'>{{ post.categoryName }}</a>
            </span>
            <span class='tag-list'>
              <template v-for='tag in post.tags'>
                <a href=''>{{ tag.tagName }}</a>
              </template>
            </span>
          </div>
        </footer>
      </div>
    </article>
  </template>
</template>

<script lang='ts'>
import { defineComponent } from 'vue'
import { timeAgo } from '@/utils/commonUtil'
import { ArticlePath } from '@/models/@types'

export default defineComponent({
  name: 'index',
  computed: {
    ArticlePath() {
      return ArticlePath
    }
  },
  methods: { timeAgo },
  props:['articlesList']
})
</script>

<style scoped>
.entry-preview {
    position: relative;
    display: flex;
    flex-direction: column;
    border-radius: var(--radius);
    background: var(--w-bg);
    box-shadow: var(--box-shadow-white);
    transition: .5s;
}
.thumbnail_box {
    position: relative;
    width: 100%;
    flex: 0 0 var(--card-size);
}
.post_box.word .thumbnail_box {
    position: absolute;
    height: 100%;
}
.thumbnail {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border-radius: var(--radius);
    overflow: hidden;
    transform: rotate(0deg);
    background: rgb(0 0 0 / 50%);
}
.thumbnail::before, .thumbnail::after {
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'iconfont';
    position: absolute;
    overflow: hidden;
    text-shadow: 0 1px 5px rgb(0 0 0 / 30%);
}
.thumbnail::before {
    content: "\ec2a";
    color: #ffffff80;
    font-size: 2rem;
}
.thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.1);
    transition: .5s cubic-bezier(0.25, 0.1, 0.25, 1);
}
.entry-custom-post {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex: auto;
    padding: var(--gap-divs);
    gap: 1em;
    border-radius: var(--radius);
    z-index: 2;
    transition: .5s;
}
.post_box.word .entry-custom-post {
    --font-color: 0deg 0% 100%;
    --font-alpha: .9;
    justify-content: flex-end;
    background: linear-gradient( 0deg,#000000,#0000);
}
.post-time, .post-meta {
    --font-alpha: 60%;
    position: relative;
    display: flex;
    font-size: var(--font-size-small);
    gap: var(--gap-span);
    color: hsl(var(--font-color) / .6);
}
.post-mark {
    display: inline-flex;
    justify-content: space-between;
    gap: 1em;
}
.entry-preview .post-mark {
    width: 100%;
}
.entry-preview .post-mark > * {
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
}
.entry-preview .post-mark .tag {
    flex: none;
}
.entry-preview .post-mark .tag-list {
    flex: auto;
    text-align: right;
}
.tag-list a {
    margin: 0 0.5em 0 0;
}
.tag a::before, .tag-list a::before {
    font-family: 'iconfont';
    margin: 0 0.25em 0 0;
}
.tag a::before {
    content: "\e634";
}
.tag-list a::before {
    content: "\e659";
    margin: 0;
}
</style>
